<html>
  <head>
    <title></title>
    <style>
    
      div.area 
      {
        background:red;
        border:4dip solid brown;
        color:yellow;
        size:300dip 40dip;
        margin:10dip;
      }
      div.area:hover 
      {
        background:orange;
        color:red;
        
      }
      div.area.case1:hover  { transition: blend(linear,400ms); }
      div.area.case2:hover  { transition: blend(cubic-in,400ms); }
      div.area.case3:hover  { transition: blend(quad-in,400ms,quad-out); }
      
      div.area.area:active 
      {
        background:yellow;
        color:red;
      }
    
    </style>
    <script type="text/tiscript"></script>
  </head>
<body>
  <div .area.case1>transition:blend(linear,400ms)</div>
  <div .area.case2>transition:blend(cubic-in,400ms)</div>
  <div .area.case3>transition:blend(quad-in,400ms,quad-out)</div>

</body>
</html>
